<template>
  <div class="warpper">
    <AppearanceSlider />

    <AppearabceContent
      :edit="edit"
      :modal="modal"
      @handleEdit="handleEdit"
      @handleCancel="handleCancel"
      @handleSave="handleSave"
    />
  </div>
</template>
<script lang="ts">
import { matchReg } from '@/library/util/remove-label';
import { useSettingBasicStore } from '@/store/setting';
import EditBasic from '@/store/setting/types/EditBasic';
import { computed, defineComponent, ref } from 'vue';
import AppearabceContent from './AppearabceContent.vue';
import AppearanceSlider from './AppearanceSlider.vue';
export default defineComponent({
  components: { AppearanceSlider, AppearabceContent },
  setup() {
    const edit = ref(false);
    const basicStore = useSettingBasicStore();

    const handleCancel = () => {
      basicStore.queryDetails(basicStore.queId);

      edit.value = false;
    };

    const handleEdit = () => {
      edit.value = true;
    };

    const handleSave = (value: EditBasic) => {
      basicStore.setInfor(value);
      basicStore.edit();
    };

    const modal = computed(() => {
      const result = {
        title: basicStore.questionaire?.queTitle,
        tips: matchReg(basicStore.questionaire?.explanation),
        startTime: basicStore.questionaire?.startTime,
        endTime: basicStore.questionaire?.endTime,
        submit: basicStore.questionaire?.submissionTips,
      };

      return result;
    });

    return {
      modal,
      edit,
      handleCancel,
      handleEdit,
      handleSave,
    };
  },
});
</script>
<style lang="less" scoped>
.warpper {
  width: 846px;
  // height: 200vh;
  display: flex;
  padding-top: 24px;
}
</style>
